<template>
  <div>
    <component :is="assembly" />
    <div>
      <button @click="changeAssembly(1)">son1</button>
      <button @click="changeAssembly(2)">son2</button>
      <button @click="changeAssembly(3)">son3</button>
    </div>
    <!-- appear默认初始化的时候就有动画 -->
    <!-- appear相当于写了hello-enter-active的class -->
    <transition name="hello" appear>
      <h1 v-show="initshow">你好啊</h1>
    </transition>
    <button @click="initshow = !initshow">点击切换</button>
    <el-divider></el-divider>
    <!-- animate.css案例1 -->
    <transition name="slide-fade">
      <div class="box" v-show="isShow">box</div>
    </transition>
    <button @click="isShow = !isShow">change</button>
    <el-divider></el-divider>
    <!-- animate.css案例2 -->
    <transition
      name="fade"
      appear
      :duration="{ enter: 8500, leave: 8500 }"
      enter-active-class="animate__animated animate__swing"
      leave-active-class="animate__animated animate__backOutLeft"
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
      @enter-cancelled="enterCancelled"
    >
      <h1 v-if="isShow2" class="home-title">欢迎来到 Vue</h1>
    </transition>
    <button @click="isShow2 = !isShow2">动画</button>
    <el-divider></el-divider>
    <input type="text" v-model.number="num" />
    <p>{{ agentNum }}</p>
    <ul>
      <transition-group move-class="move">
        <li @click="change" v-for="item in items" :key="item">{{ item }}</li>
      </transition-group>
    </ul>
  </div>
</template>
<script>
// https://blog.csdn.net/qq_41370833/article/details/125299151
// https://blog.csdn.net/weixin_55689951/article/details/124683301
// gsap动画库的使用-https://www.cnblogs.com/LiZiheng/p/16427280.html
// https://blog.csdn.net/damadashen/article/details/124903113
import gsap from 'gsap'
import _ from 'loadsh'
export default {
  name: 'day-11',
  data() {
    return {
      assembly: '',
      initshow: true,
      isShow: true,
      isShow2: true,
      newVal: '',
      items: ['张三', '李四', '王五'],
      num: '',
      agentNum: 0
    }
  },
  computed: {
    animatedNum() {
      return this.agentNum
    }
  },
  watch: {
    num(newVal) {
      gsap.to(this.$data, { duration: 0.5, agentNum: newVal })
      // gsap.to(targets, vars)
      // 产生从初始位置（或状态）到目标位置（或状态）的动画
      // targets： 产生动画的对象
      // vars： 目标状态参数https://blog.csdn.net/qq_37209594/article/details/124124721
    }
  },
  components: {
    ComSon1: () => import('./components/ComSon1'),
    ComSon2: () => import('./components/ComSon2'),
    ComSon3: () => import('./components/ComSon3')
  },
  methods: {
    change() {
      this.items = _.shuffle(this.items)
    },
    changeAssembly(value) {
      if (value === 1) {
        this.assembly = 'ComSon1'
      } else if (value === 2) {
        this.assembly = 'ComSon2'
      } else if (value === 3) {
        this.assembly = 'ComSon3'
      }
    },
    beforeEnter(el) {
      // 动画/过渡准备进入前触发
      console.log('beforeEnter:', el)
    },
    enter(el) {
      // 元素进入 enter-active触发
      console.log('enter:', el)

      // done() //执行done的时候entert-active过渡结束
    },
    afterEnter(el) {
      // 进入过渡/动画结束后
      console.log('afterEnter:', el)
    },
    enterCancelled(el) {
      // 进入动画过程中可以去掉进入动画
      console.log('enterCancelled:', el)
    }
  }
}
</script>
<style lang="scss" scoped>
// 进入时的动画
.hello-enter-active {
  animation: donghua 1s;
}
// 离开时的动画
.hello-leave-active {
  animation: donghua 1s reverse;
}
//动画 动画名叫'donghua'
@keyframes donghua {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0px);
  }
}
.slide-fade-enter-active {
  animation: bounce 0.5s;
}
.slide-fade-leave-active {
  animation: backOutDown 0.5s;
}
ul {
  list-style: none;
}
.move {
  transition: 0.5s;
}
</style>
